import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, Breadcrumb, Table, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import service from '../../../../api/lst';
import { useDispatch } from 'react-redux'
import './Package.scss'
interface DataType {
    key: React.Key;
    name: string;
    price: number;
    packageprice: number;
    sum: number;
    states: string;
    time: string;
    range: string;
    id: number;

}
function Package(props: any) {
    var dispatch = useDispatch()
    useEffect(() => {
        list()
    }, [])
    var [tableData, setTableData] = useState<DataType[]>([])
    var [id, setId] = useState([])
    var [form] = Form.useForm()

    //列表
    const list = async () => {
        var res = await service.marketing.package_list()
        // console.log(res.data);
        res.data.map((item: any) => {
            item.key = item.id
        })
        setTableData(res.data)
    }

    var navigate = useNavigate()
    //表单提交
    const onFinish = async (values: any) => {
        // console.log(values);
        var res5 = await service.marketing.package_list4({ name: values.name, states: values.states })
        setTableData(res5.data)
        // list()
    };
    //表单重置
    const onReset = () => {
        form.resetFields();
    };
    //表格
    const columns: ColumnsType<DataType> = [
        {
            title: '套餐名称',
            dataIndex: 'name',
            render: (_, record) => <p>{record.name}</p>

        },
        {
            title: '原价(元)',
            dataIndex: 'price',
            render: (_, record) => <p>{record.price}</p>

        },
        {
            title: '套餐价(元)',
            dataIndex: 'packageprice',
            render: (_, record) => <p>{record.packageprice}</p>

        },
        {
            title: '套餐商品',
            dataIndex: 'sum',
            render: (_, record) => <p>{record.sum}</p>

        },
        {
            title: '套餐状态',
            dataIndex: 'states',
            render: (_, record) => <p>{record.states}</p>

        },
        {
            title: '活动日期',
            dataIndex: 'time',
            render: (_, record) => <p>{record.time}</p>

        },
        {
            title: '操作',
            render: (_, record) => (
                <Space size="middle">
                    <Button className='button' onClick={() => { edit(record) }} >编辑</Button>

                    <Button className='button' onClick={() => { del(record) }} >删除</Button>
                    <Button className='button' onClick={() => { xiu(record) }}>停用</Button>
                </Space>
            ),
        },
    ];
    //表格数据

    //新增
    const add = () => {

        dispatch({ type: 'REMOVE_ID' })
        navigate('/index/addpackage');
    }
    //修改
    const xiu = async (record: any) => {
        // alert(111)
        if (record.states == '未开始') {
            var res1 = await service.marketing.package_xiu({ id: record.id, states: '进行中' })
            // console.log(res1);
            // list()
        }
        else if (record.states == '进行中') {
            var res1 = await service.marketing.package_xiu({ id: record.id, states: '已结束' })
            // console.log(res1);
            // list()
        }
        else if (record.states == '已结束') {
            var res1 = await service.marketing.package_xiu({ id: record.id, states: '未开始' })
            // console.log(res1);
        }
        list()

    }
    //删除
    const del = async (record: any) => {
        var res1 = await service.marketing.package_del({ id: record.id, })
        console.log(res1);
        list()
    }
    //编辑
    const edit = (record: any) => {
        dispatch({ type: 'SAVE_ID', payload:record.id })
        navigate('/index/addpackage');


    }
    return (
        <div className='package'>
            <div className="head">
                <div className="top">
                    <div className="bread">
                        <Breadcrumb>
                            <Breadcrumb.Item>营销</Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="">套餐</a>
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    <h2>套餐</h2>
                </div>
                <div className='form'>
                    <Form
                        className='forms'
                        form={form}
                        name="control-hooks"
                        onFinish={onFinish}
                    // style={{ maxWidth: 600 }}
                    >
                        <Form.Item name="name" label="名称" >

                            <Input style={{ width: 300, marginLeft: 40, marginRight: 30 }} />
                        </Form.Item>
                        <Form.Item name="states" label="状态">
                            <Select
                                style={{ width: 300, marginRight: 30 }}
                                options={[
                                    { value: '全部', label: '全部' },
                                    { value: '未开始', label: '未开始' },
                                    { value: '进行中', label: '进行中' },
                                    { value: '已结束', label: '已结束' },
                                ]}
                            />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" style={{ marginRight: 30 }}>
                                提交
                            </Button>
                            <Button htmlType="button" onClick={onReset}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
            <div className="main">
                <div className="right">
                    <span>套餐列表</span>

                    <div className="button">
                        <Button type="primary"
                            style={{ marginRight: 30 }}
                            icon={<PlusOutlined />}
                            onClick={add}>
                            新建
                        </Button>
                    </div>
                </div>
                <div className="taber">
                    <Table columns={columns} dataSource={tableData} />
                </div>
            </div>
        </div>
    );
}

export default Package;